<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link rel="icon" href="favicon.ico">
    <title>BTC - Administraci&oacute;n</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/Highcharts-2.3.3/js/highcharts.js" ></script>
    <script type="text/javascript">
        var chart;
        $(function(){
            $.ajax({
                type: "json",
                cache: false,
                url: "<s:url namespace="/json" action="stats" />",
                success: function(data) {
                    if (!data.error) {
                        armarGraficos(data)
                    }

                },
                error: function() {

                }
            });

            function armarGraficos(data) {
                armarTorta(data.stats.palletXClasificacion);
                armarBarrasPorMaquina(data.stats.palletXMaquina)

            }

            function armarTorta(palletXClasificacion) {
                var dataToPie = [];
                var i = 0;
                for (var clasificacion in palletXClasificacion) {
                    dataToPie[i] = [clasificacion, palletXClasificacion[clasificacion]];
                    i++;

                }
                // Build the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph1',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Pallets por Clasificación'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                        percentageDecimals: 1
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Cantidad de pallets en %',
                        data: dataToPie
                    }]
                });
            }

            function armarBarrasPorMaquina(palletXMaquina) {
                var maquinas = [];
                var temporal = [];

                for (maquina in palletXMaquina) {
                    maquinas.push(maquina);
                    var json = palletXMaquina[maquina];
                    for (clasificacion in json) {
                        if (!temporal[clasificacion]) {
                            temporal[clasificacion] = [];
                        }
                        temporal[clasificacion].push(json[clasificacion]);
                    }
                }
                var dataToBarras = [];
                var i = 0;
                for (clasificacion in temporal) {
                    var row = {name: clasificacion, data: temporal[clasificacion]};
                    dataToBarras[i] = row;
                    i++;
                }
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph2',
                        type: 'column'
                    },
                    title: {
                        text: 'Clasificación por máquina'
                    },
                    xAxis: {
                        categories: maquinas
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Cant pallets'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        shadow: true
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+
                                    this.x +': '+ this.y +' mm';
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: dataToBarras
                });
            }

        });
    </script>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">BTC</a>
        <ul class="nav">
            <li><s:a action="index">Dimensiones</s:a></li>
            <li class="active"><a href="#">Estad&iacute;sticas</a></li>
            <li><s:a action="generate">Generador</s:a></li>
        </ul>
    </div>
</div>
<div class="page-header">
    <h1>Estad&iacute;sticas</h1>
</div>
<div id="graph1">

</div>
<div id="graph2">

</div>
<div id="graph3">

</div>
<div id="graph4">

</div>
</body>
</html>